<template>
    <div id="home">
        <!-- 轮播图 -->
        <div id="rotation">
            <el-carousel :interval="4000" type="card" style="width: 80%; margin: 0 auto">
                <el-carousel-item v-for="item in rotationUrls" :key="item">
                    <img width="600px" :src="item"/>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="topicContent">
            <Topic v-if="index < 3" v-for="(item,index) in topics" :title="item.titel" :titleColor="item.color"
                   :key="index"></Topic>
        </div>
        <div class="categoryContent">
            <Category v-for="(item,index) in categorys" :imgUrl="item.imgUrl" :categoryName="item.categoryName"
                      :key="index"></Category>
        </div>
    </div>
</template>

<script>
    import Topic from "@/components/Topic"
    import Category from "@/components/Category";

    export default {
        name: "Home",
        components: {
            Topic,
            Category
        },
        data() {
            return {
                // 轮播图，以下是从LeetCode上找的
                rotationUrls: [
                    'https://pic.leetcode-cn.com/1607675508-KOEkPP-高频算法实战 @2x（LB 广告 500x240）.jpg',
                    'https://pic.leetcode-cn.com/1632987531-yEYBym-1610004844-bBQteK-零起步学算法500_240.jpg.jpeg',
                    'https://pic.leetcode-cn.com/1610004897-JuWMnk-七章刷完数据结构 500_240.jpg.jpeg',
                ],
                // 热点题目，只支持三个
                topics: [
                    {
                        titel: "热点题目",
                        color: "#67C23A",
                    },
                    {
                        titel: "蓝桥必刷",
                        color: "#E6A23C",
                    },
                    {
                        titel: "近期考试",
                        color: "#F56C6C",
                    }
                ],
                categorys: [
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/200901033854/Leetbook_%E5%9B%BE%E8%A7%A3%E7%AE%97%E6%B3%95%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84_300x400.jpg",
                        categoryName: "图解数据结构"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/201224032912/%E4%BB%8E%E9%9B%B6%E5%AD%A6%E7%AE%97%E6%B3%95.jpg",
                        categoryName: "零起步学算法"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/210406070103/%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95.jpg",
                        categoryName: "贪心算法"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/200731021826/7%E7%AB%A0.jpeg",
                        categoryName: "七章刷完数据结构"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/210129025310/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C_%E9%9D%A2%E8%AF%95%E7%AA%81%E5%87%BB.jpg",
                        categoryName: "计算机网络面试突击"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/200901033854/Leetbook_%E5%9B%BE%E8%A7%A3%E7%AE%97%E6%B3%95%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84_300x400.jpg",
                        categoryName: "图解数据结构"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/201224032912/%E4%BB%8E%E9%9B%B6%E5%AD%A6%E7%AE%97%E6%B3%95.jpg",
                        categoryName: "零起步学算法"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/210406070103/%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95.jpg",
                        categoryName: "贪心算法"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/200731021826/7%E7%AB%A0.jpeg",
                        categoryName: "七章刷完数据结构"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/210129025310/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C_%E9%9D%A2%E8%AF%95%E7%AA%81%E5%87%BB.jpg",
                        categoryName: "计算机网络面试突击"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/200901033854/Leetbook_%E5%9B%BE%E8%A7%A3%E7%AE%97%E6%B3%95%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84_300x400.jpg",
                        categoryName: "图解数据结构"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/201224032912/%E4%BB%8E%E9%9B%B6%E5%AD%A6%E7%AE%97%E6%B3%95.jpg",
                        categoryName: "零起步学算法"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/210406070103/%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95.jpg",
                        categoryName: "贪心算法"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/200731021826/7%E7%AB%A0.jpeg",
                        categoryName: "七章刷完数据结构"
                    },
                    {
                        imgUrl: "https://assets.leetcode-cn.com/aliyun-lc-upload/leetbook/cover/210129025310/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C_%E9%9D%A2%E8%AF%95%E7%AA%81%E5%87%BB.jpg",
                        categoryName: "计算机网络面试突击"
                    }
                ]
            }
        },
        methods: {

        },
        created() {

        },
        mounted() {

        }
    }
</script>

<style scoped>
    #rotation {
        margin: 0 auto;
        margin-top: 10px;
    }

    .topicContent {
        width: 80%;
        margin: 0 auto;
    }

    .categoryContent {
        width: 70%;
        margin: 0 auto;
    }

    .categoryContent:after {
        clear: both;
        content: "";
        display: block;
    }
</style>
